<template>
	<view class="cart-page status-bar-height position-relative">
		<view class="flex align-center justify-between px-3 h-88 mb-4">
			<text class="text-white fs-40">{{$t('hhh.t11')}}</text>
			<text class="fs-32 text-white" @tap="editFn">{{isEdit?$t('hhh.t3'):$t('hhh.t12')}}</text>
		</view>
		<view class="rounded-lg bg-white py-3 px-2 cart-list overflow-y box-sizing">
			<block v-for="(item,index) in cartList" :key="index">
				<cartCardVue :item="item" @changeCheck="changeCheck(item)"></cartCardVue>
			</block>
			<nodata v-if="cartList.length === 0"></nodata>

			<u-gap height="80" bgColor="transparent"></u-gap>
		</view>
		<checkoutCtroVue :isEdit="isEdit" :total="total" @checkout="checkout" @delClick="delClick" @selectAll="selectAll">
		</checkoutCtroVue>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import HttpApi from '@/api/httpApi';
	import cartCardVue from './components/cart-card.vue';
	import checkoutCtroVue from './components/checkout-ctro.vue';
	export default {
		components: {
			cartCardVue,
			checkoutCtroVue
		},
		data() {
			return {
				isEdit: false,
				cartList: []
			}
		},
		computed: {
			total() {
				if (this.isEdit) return 0
				const peipei = this.cartList.find(i => i.checked)
				if (peipei) {
					return peipei.hours * peipei.peipei.price || 0
				}
				return 0
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			delClick() {
				const ids = this.cartList.filter(i => i.checked).map(i => i.id)
				if (ids.length === this.cartList.length) {
					this.cartClear()
					return
				}
				this.cartDel()
			},
			cartClear() {
				HttpApi.cartClear().then(res => {
					if (res.code === 1) {
						uni.$tools.toast(this.$t('hhh.t82'))
						this.getList()
					}
				})
			},
			cartDel() {
				HttpApi.cartDel({
					id: ids.join(',')
				}).then(res => {
					if (res.code === 1) {
						uni.$tools.toast(this.$t('hhh.t82'))
						this.getList()
					}
				})
			},
			changeCheck(item) {
				// 可以多个删除
				if (!this.isEdit) {
					this.cartList.forEach(i => {
						if (item.id === i.id) {
							i.checked = !i.checked
						} else {
							i.checked = false
						}
					})
				} else {
					item.checked = !item.checked
				}

			},
			checkout() {
				const isCheckIndex = this.cartList.findIndex(i => i.checked)
				if (isCheckIndex > -1) {
					const item = this.cartList[isCheckIndex]
					uni.navigateTo({
						url: `/pages/checkout/checkout?id=${item.peipei_id}&num=${item.hours || 1}`
					})
				} else {
					uni.$tools.toast(this.$t('hhh.t81'))
				}
			},
			getList() {
				HttpApi.cartList().then(res => {
					if (res.code === 1) {
						this.cartList = res.data.data.map(i => ({
							...i,
							num: 1,
							checked: false
						}))
					}
				})
			},
			editFn() {
				this.isEdit = !this.isEdit
			},
			selectAll(flag) {
				this.cartList.forEach(i => {
					i.checked = flag
				})
			}
		}
	}
</script>

<style lang="scss">
	.cart-page {
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: center top;
		background-image: url('/static/imgs/cart_bg.png');

		.cart-list {
			height: calc(100dvh - 125px);
		}
	}
</style>